<template>
  <v-container>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="7" lg="6">
        <v-card>
          <v-card-title>
            <h4>未处理</h4>
            <v-spacer></v-spacer>
            <v-btn icon @click="show1 = !show1">
              <v-icon>{{ show1 ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
            </v-btn>
          </v-card-title>
          <v-expand-transition>
            <div v-show="show1">
              <v-divider></v-divider>
              <v-list three-line subheader>
                <router-link
                  :to="{name:'content',query:{id:item.id}}"
                  v-for="item in responseData1"
                  :key="item.title"
                >
                  <v-list-item link>
                    <v-list-item-avatar>
                      <v-icon class="red darken-1 white--text">mdi-email</v-icon>
                    </v-list-item-avatar>

                    <v-list-item-content>
                      <v-list-item-title>{{item.content}}</v-list-item-title>
                      <v-list-item-subtitle v-text="item.orgnization"></v-list-item-subtitle>
                      <v-list-item-subtitle v-text="item.time"></v-list-item-subtitle>
                    </v-list-item-content>
                  </v-list-item>
                </router-link>
              </v-list>
            </div>
          </v-expand-transition>
        </v-card>
      </v-col>
    </v-row>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="7" lg="6">
        <v-card>
          <v-card-title>
            <h4>处理中</h4>
            <v-spacer></v-spacer>
            <v-btn icon @click="show2 = !show2">
              <v-icon>{{ show2 ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
            </v-btn>
          </v-card-title>
          <v-expand-transition>
            <div v-show="show2">
              <v-divider></v-divider>
              <v-list three-line subheader>
                <router-link
                  :to="{name:'content',query:{id:item.id}}"
                  v-for="item in responseData2"
                  :key="item.title"
                >
                  <v-list-item link>
                    <v-list-item-avatar>
                      <v-icon class="red darken-1 white--text">mdi-email</v-icon>
                    </v-list-item-avatar>

                    <v-list-item-content>
                      <v-list-item-title>{{item.content}}</v-list-item-title>
                      <v-list-item-subtitle v-text="item.orgnization"></v-list-item-subtitle>
                      <v-list-item-subtitle v-text="item.time"></v-list-item-subtitle>
                    </v-list-item-content>
                  </v-list-item>
                </router-link>
              </v-list>
            </div>
          </v-expand-transition>
        </v-card>
      </v-col>
    </v-row>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="7" lg="6">
        <v-card>
          <v-card-title>
            <h4>已完成</h4>
            <v-spacer></v-spacer>
            <v-btn icon @click="show3 = !show3">
              <v-icon>{{ show3 ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
            </v-btn>
          </v-card-title>
          <v-expand-transition>
            <div v-show="show3">
              <v-divider></v-divider>
              <v-list three-line subheader>
                <router-link
                  :to="{name:'content',query:{id:item.id}}"
                  v-for="item in responseData3"
                  :key="item.title"
                >
                  <v-list-item link>
                    <v-list-item-avatar>
                      <v-icon class="red darken-1 white--text">mdi-email</v-icon>
                    </v-list-item-avatar>

                    <v-list-item-content>
                      <v-list-item-title>{{item.content}}</v-list-item-title>
                      <v-list-item-subtitle v-text="item.orgnization"></v-list-item-subtitle>
                      <v-list-item-subtitle v-text="item.time"></v-list-item-subtitle>
                    </v-list-item-content>
                  </v-list-item>
                </router-link>
              </v-list>
            </div>
          </v-expand-transition>
        </v-card>
      </v-col>
    </v-row>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="7" lg="6">
        <v-card>
          <v-card-title>
            <h4>已取消</h4>
            <v-spacer></v-spacer>

            <v-btn icon @click="show4 = !show4">
              <v-icon>{{ show4 ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
            </v-btn>
          </v-card-title>
          <v-expand-transition>
            <div v-show="show4">
              <v-divider></v-divider>
              <v-list three-line subheader>
                <router-link
                  :to="{name:'content',query:{id:item.id}}"
                  v-for="item in responseData4"
                  :key="item.title"
                >
                  <v-list-item link>
                    <v-list-item-avatar>
                      <v-icon class="red darken-1 white--text">mdi-email</v-icon>
                    </v-list-item-avatar>

                    <v-list-item-content>
                      <v-list-item-title>{{item.content}}</v-list-item-title>
                      <v-list-item-subtitle v-text="item.orgnization"></v-list-item-subtitle>
                      <v-list-item-subtitle v-text="item.time"></v-list-item-subtitle>
                    </v-list-item-content>
                  </v-list-item>
                </router-link>
              </v-list>
            </div>
          </v-expand-transition>
        </v-card>
      </v-col>
    </v-row>
    <div class="text-center">
      <v-btn class="mt-3" color="primary" @click="submit()">返回</v-btn>
    </div>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    responseData1: {},
    show1: true,
    responseData2: {},
    show2: true,
    responseData3: {},
    show3: false,
    responseData4: {},
    show4: false,
    items: [
      { orgnization: "杭电社团联合会", time: "2019-11-30 09:00:00" },
      { orgnization: "Recipes", time: "Jan 17, 2014" },
      { orgnization: "Work", time: "Jan 28, 2014" }
    ]
  }),
  mounted: function() {
    this.loadData1();
    this.loadData2();
    this.loadData3();
    this.loadData4();
  },
  methods: {
    loadData1: function() {
      const that = this;
      var token = "";
      token = localStorage.getItem("token");
      this.axios({
        method: "get",
        url: "http://www.hdufocus.cn:8081/reservation/status",
        headers: {
          Authorization: token
        },
        params: { status: 1 }
      })
        .catch(function() {
          that.$router.push({ path: "/login" });
        })
        .then(function(response) {
          const status = response.status;
          if (status == 200) {
            that.responseData1 = response.data.data.reverse();
          }
        });
    },
    loadData2: function() {
      const that = this;
      var token = "";
      token = localStorage.getItem("token");
      this.axios({
        method: "get",
        url: "http://www.hdufocus.cn:8081/reservation/status",
        headers: {
          Authorization: token
        },
        params: { status: 2 }
      })
        .catch(function() {
          that.$router.push({ path: "/login" });
        })
        .then(function(response) {
          const status = response.status;
          if (status == 200) {
            that.responseData2 = response.data.data.reverse();
          }
        });
    },
    loadData3: function() {
      const that = this;
      var token = "";
      token = localStorage.getItem("token");
      this.axios({
        method: "get",
        url: "http://www.hdufocus.cn:8081/reservation/status",
        headers: {
          Authorization: token
        },
        params: { status: 3 }
      })
        .catch(function() {
          that.$router.push({ path: "/login" });
        })
        .then(function(response) {
          const status = response.status;
          if (status == 200) {
            that.responseData3 = response.data.data.reverse();
          }
        });
    },
    loadData4: function() {
      const that = this;
      var token = "";
      token = localStorage.getItem("token");
      this.axios({
        method: "get",
        url: "http://www.hdufocus.cn:8081/reservation/status",
        headers: {
          Authorization: token
        },
        params: { status: -1 }
      })
        .catch(function() {
          that.$router.push({ path: "/login" });
        })
        .then(function(response) {
          const status = response.status;
          if (status == 200) {
            that.responseData4 = response.data.data.reverse();
          }
        });
    },
    submit: function() {
      var that = this;
      that.$router.push({ path: "/" });
    }
  }
};
</script>